Copyright: Copyright © 1996,1999 Step Ahead Software Pty Ltd


Contents
AnFX

Introduction

This introduction covers the basic concepts of AnFX design. It is the fastest way to learn how to make impressive, interactive content for the internet.

Text that appears in blue, like this, indicates actions that you will perform in AnFX.

Please note: This window will stay on top of all other windows even when you perform actions in AnFX so don't worry about losing this window behind others. It will stay here until you close it. If you do close it and want to reopen it click on Help and choose Tutorial in the AnFX main menu.

Some of these pages will be longer than this window and you will have to scroll down to see all of the content.

Go to the next page now: click on the blue triangle above.


Right Click on Everything
More Details

Right Click on Everything!

Many of the operations in AnFX can be performed through menus that appear after clicking the right mouse button on an actor or an action. If you are ever stuck or don't know what you can do with an actor - Right Click on it!


Note for evaluation users only

If you have not purchased a full user license you can still learn how to use the AnFX studio in this tutorial and you can save your designs and see them run locally on your PC in the built in simulator or your Java powered browser (high quality). The designs you build with the evaluation copy will produce designs that work locally but will display an evaluation message when running over the the internet. This tutorial will teach you how easy it is to use the studio and will allow you to see your designs come alive, but to bring them to life on your web site without the evaluation message you need to visit http://www.stepaheadsoftware.com/anfxp.htm to purchase a license.

AnFX is available in 3 editions:

Personal

Silver

Gold

There's one to suit your budget.


Action
An action is something that an actor does. Without actions actors just sit there and do nothing. Assigning actions to actors is what makes AnFX designs so interesting. In the AnFX studio you specify the actions for a particular actor and specify when each action is to take place.

In the "AnFX Times" design the waypoint is an action - it tells the actor to move towards it.


Selection Indicators
Sizing sqaures are small black boxes that can be used to resize the actor or waypoint. You can also select an actor group by holding down the SHIFT key and clicking on an actor, in which case the selection indicator will be a thick gray line around all of the actors components. Just clicking without holding down the Shift key selects one of the actors components only.


Actors
Actors are the focal point of your AnFX designs. In our "AnFX Times" design the asteroid is an actor and so is the earth and the moon. An actor is an object in a scene that can be set to move, size or phase from invisible to visible and visa versa.

When you add a Shape Actor, Text Actor or Image Actor to a design the actor is shown in its starting position. You can move the actor to change its starting position or add waypoints to specify the path along which the actor travels during a scene.

This tutorial will give you enough information to create and configure an actor. For more help on actors or waypoints, consult the main help file (from within AnFX choose Help|Contents).


Sequencer
The sequencer is the main window of AnFX. It is typically located at the top of your screen. In this window you see the actions that have been set up for the currently selected actor.

The combo box on top near the left shows the current event that is being displayed. The actions shown in the sequencer window are always those that are triggered by the current event. Changing the current event to a new event will change the set of actions that are displayed. The new set of actions are those actions triggered by the new event.


Tutorial Pg 3
Tutorial

Step 3: Add a way point to your new ellipse

We will now add an action and configure it to occur half a second after the scene starts. Make sure that the drop down list box to the right of the words "Show actions for" is set to "Start of Scene".

Now click on the ellipse to ensure that it is the current actor.

Then in the sequencer window at the top click on the new action button [image] in the tool bar and from the menu that pops up choose "Path...". The action triggering dialog box will appear. This dialog allows you to specify how the action will be triggered and which actor will be affected by the action.

In the top left corner of the dialog in the edit box following the word "At" enter the number 500. This tells AnFX that you want the action to occur 500 milliseconds (half a second) after the scene starts.

Press the Ok. A thin, gray, rectangular outline is now added to the "AnFX Stage" window below and to the right of your ellipse. This new outline is referred to as a way point. It shows what the size and position of the actor will be after it travels along its path to this way point.

Note: An action icon (a shaded rectangular bar with arrows at each end) will appear in the sequencer window (the top window just underneath the tool bar). This bar represents the start and end times for the way point. Leave the bar as it is for the moment but later you can drag, size or right click on the actor icon to change its properties.

Drag the new way point so that it is about half way down on the right hand side of the applet frame.


TheRest
More Details

At this point you might want to start playing with AnFX directly or you may like to learn more from a tutorial. The following tutorial takes you through the process of building a design from scratch and introduces you to some AnFX terminology.


Playing your designs

One of the great features of AnFX is its unique inbuilt simulator. It lets you play your designs with the simple click of a button, speeding development.

Before we explore the simulator please make sure that "The AnFX Times" design is open in AnFX to the left of this introduction window.

If not then from the AnFX main menu click on File and then select Open. In the File Open dialog box choose anfxtimes.afd.


Playing your designs Step 1
Playing your designs

We are now going to play this design in the simulator. The simulator controls are located up in the AnFX tool bar and look like typical VCR buttons. See if you can find them now. They look like this:

Step One

Go to the AnFX tool bar
and press the play button:

and see the design start to animate. Press

to stop. You can also press
 or
to go to the beginning or end, even while it's playing.

When it reaches the end press the rewind button [image] to take you back to the start, ready to play again when you need it to.


Playing your designs Step 2
Playing your designs

As the design played you may have noticed a marker moving along the time scale. This represents the current time. You can move your design to a specific moment in time (like 4 seconds after it starts) by clicking on the appropriate place in the time scale.

Step Two

Move the mouse pointer over the number 4 in the time scale and click the left mouse button. The design will change to show what it would look like 4 seconds after it started playing.


Changing the waypoint

Now that you can operate the simulator it's time to make some changes to the design.

In our ficticious AnFX Times newspaper we have a story headline "Asteroid Hits Planet Earth". Your mission, should you choose to accept it, is to save the earth by changing the path of the nasty red asteroid. The fate of the planet is in your hands.


Changing the Waypoint Step 1
Changing the Waypoint

A waypoint tells an actor where to go and what size it should be when it gets there.

Every actor has a startpoint (the place where is starts) and as many or few waypoints as you desire. An actor with no waypoints doesn't move or change its size.

Step One

To move or edit a waypoint you must first select it.

Click on the 1 second mark in the time scale. This will move the red asteroid away from its waypoint so that we can see the waypoint. Move the mouse pointer over the small rectangle located within the blue planet we all call home.

This rectangle has a small '1' in its top left corner indicating that it is the first waypoint of this asteroid. This is the waypoint we are interested in moving.

Make sure the waypoint is selected: Press and release the left mouse button while over the waypoint.

NOTE: If you do not see 4 small sizing boxes appear at its corners then it probably means that a larger object surrounding the waypoint is selected.

To select an object surrounded by another object hold down ALT and click the left mouse button a number of times until the object that you want selected is displaying its sizing boxes on its corners.

It may take a number of clicks with the ALT button held down to reach the desired object. This feature allows you to easily select overlaid objects in complex designs.

After you have selected the waypoint: Press and hold the left mouse button down while over the centre of this waypoint and move the mouse so that the waypoint is now located above the earth (the blue circle) then release the left mouse button.


Tutorial Pg 5b
Tutorial

Step 5: Making your ellipse "phase"

In the AnFX stage window Right-click on the ellipse's start point (the one with the asterisk * in the top left corner) and choose "Intensity...". If there is no asterisk, the start point is the one without a number in it.

Type in 100 (it should already be that) and press Ok. This tells AnFX to make the initial intensity of the ellipse fully visible.

I suppose you want to see some action now that you've been reading all this text - well ok go ahead and press the play button in the tool bar (the single triangle pointing to the right). You should see your actors perform the actions you have assigned to them. You can press stop button (the black square) at any time. Don't forget to press the reset back to start button [image] when you have finished to set the sequencer back to the beginning.


Changing the waypoint Step 2
Changing the waypoint

Now let's see if we have saved the earth!

Step Two

On the simulator control panel press the [image] button to ensure the simulator is reset back to the start of the scene. Now press the [image] play button to watch as the asteroid, hopefully, misses the earth.

Phew! That was close! You have just saved the world. Congratulations!


Changing the waypoint Step 3
Change the waypoint

We are now about to do something scary for the inhabitants of this planet. We are going to make the red asteroid grow quite large.

Step Three

Make sure the same waypoint is selected and move the mouse pointer over the top of it. Press the right mouse button and choose "Size" from the popup menu that appears.

Type in the numbers 100 100. This represents the width and height of the asteroid when it reaches this waypoint.

Now play the design in the simulator again by pressing the [image] button to ensure the simulator is reset back to the start of the scene and then press the [image] play button.

You should have seen the asteroid grow much bigger.


Running the Applet

A short cut to testing in a browser is to Press the test button [image] in the tool bar which is to the right of the HTML button. After a few seconds your browser should appear with your AnFX animation running in it.

To test an animation in a browser without going via AnFX: Open your browser and Select "File|Open File..." and locate the file "bestLocalTest.html" on your hard disk (eg., c:\program files\Step Ahead\AnFX\bestLocalTest.html), or type the location into the URL box. Assuming that the AnFX player files (those with the ".class", *.cab and *.jar extensions) are all in the same directory as the bestLocalTest.html file then this will execute your first AnFX design.

Please read the online help under "Setting up AnFX on your web site" for information about publishing animations on a web site.


Tutorial Pg 5a
Tutorial

Step 5: Making your ellipse "phase"

We will now add an intensity action. Intensity actions allow you to phase your actors from visible to invisible or visa versa and so we often refer to these intensity actions as "phasers".

Right-click on empty space in the main part of the sequencer window (the coloured part - not the gray part) and select "Intensity...". The Action Triggering dialog box will appear. Press the Properties button and the "Intensity Action" dialog box will appear. The first two fields allow you to specify the start and end time of the action. Ignore them for now. Slide the slide bar until end value equals "0". This means that the intensity of the actor will be 0 at the end of this intensity action. Click Ok and then Ok again

 [Note: in the AnFX studio and its simulator image actors will be fully visible for all intensity levels 1-100% and invisible for intensity level 0. When your designs are playing in a browser the AnFX player will display your images at the proper intensity.]

Note: Another bar will appear in the sequencer window near where you performed the right click. Drag the bar back to the beginning time 0, so that it extends from there to the one second mark.


Tutorial Pg 2
Tutorial

Step 2: Add an Ellipse Actor

An ellipse actor is powerful oval shape actor that can be drawn as an outline or as solidly filled. You can specify how much of the ellipse is drawn so as to produce pie shaped pieces by specifying a sweep angle and a start angle. Click on the "Ellipse" button on the toolbar (It's the one below and to the right of the License menu). This will add an ellipse actor to the scene and place it in the "Stage Window". (Note: you can also choose Ellipse from the Actor menu).

Click in the center of the new ellipse so that the gray rectangle around it dissappears and the black sizing squares appear.

Resize the ellipse by dragging one of the selection indicators to a new position.

Change the colour of the ellipse by right-clicking on it and selecting "Color".

Choose a Red colour and press "OK".

Drag the ellipse to the top left of the applet frame: Press and hold the left mouse button while the cursor is over the actor and then move the mouse to the desired position. Release the mouse button.


Tutorial Pg 7
Tutorial

Step 7: Adding a text actor and have it fade in

Add a Text Actor to your design. This can be done in a similar way to adding the ellipse, by clicking on the "Text" button on the toolbar.

Right-click on the text actor and select "Contents".

Type in "I am an AnFX master!", and press "OK".

If the frame isn't big enough, resize it, then center the frame on the screen.

Add a phaser as mentioned above. Make sure the bar goes from 0 - 1 seconds.

Choose 0 as the start intensity and 100 as the end intensity. Press "OK".

Right-click on the start point (*) and choose "Intensity...". Enter "0" and press OK.

And there you have it! Press the play button in the simulator to see your animation.


Conclusion
Tutorial

Conclusion

This tutorial should have given you a taste of the simple, intuitive yet powerful nature of AnFX design. AnFX technology really works quite efficiently without the need for plug ins and is being used on sites all around the world.

If you have any questions regarding how to use AnFX or find that you would like to see this tutorial improved in certain areas then please email us at anfxsupport@stepaheadsoftware.com so that we may improve it.

Happy AnFXing!

The AnFX Team
Step Ahead
Software


Tutorial Pg 9
Tutorial

Testing the design

Now you are ready to test your design. First you must save it. Press File|Save and enter "best" and press "Save". AnFX will now generate two files called:

"best.afd" (your design file - this is the one you edit if you want to make changes)

and

"best.afx" (this is the file containing the instructions to tell the AnFX player which actors are in your animation and what they must do etc.,.

To test your design in a browser the AnFX applet must be contained within a HTML file. AnFX makes this easy...

Choose File|Generate HTML file and AnFX will generate two HTML files for you: one called bestLocalTest.html (this is a complete HTML file) and one called bestPaste.html (this one only contains the <applet> tag used to invoke your Animation - you can insert the contents of this file into an existing HTML page that you want your animation displayed in using your favourite HTML editor).

Now everything is ready for playing your animation in a browser: Select File|Test design in browser. After a short time your default browser will open up the file bestLocalTest.html and start up your design.

If you want to test this design on your web site see AnFX Help|Contents and go to the topic Setting Up AnFX on your web site

. (note for evaluation users)


Tutorial Pg 5
Tutorial

Step 5: Making your ellipse "phase"

You may have noticed that when you added a waypoint to your ellipse, an action icon (gray rectangular bar) appeared in the sequencer window. This bar represents an action to be performed by your actor. You can add many types of actions. The left hand column shows the name of the action (eg., path) and just to the right is a picture of the actor that the action will affect. This visual display in the sequencer helps you to manage sophisticated animations with ease.


Use The Simulator
More Details

Use the Simulator

As we saw earlier the AnFX studio has a built in simulator which assists you in your design efforts by showing your actors as they move, size and phase. The simulator is intended to show a WYSIWYG simulation of your design. To start it you can press the play button in the sequencer.


Tutorial Pg 4
Tutorial

Step 4: Add another way point to your ellipse (using a different method)

Right-click on the new way point that you just created and choose "Add Waypoint".

Drag the new waypoint to the bottom left of the applet frame. As you can see you can add way points to way points to make arbitrarily complex paths for your actors to follow. You can even move them out of the applet frame so that they can enter and exit the visible applet area from the sides!

You can even adjust the x and y profile of each way point to create curved paths - you can read about profiles in the help later if you want to.


Tutorial Pg 8
Tutorial

Step 8: Other events and simulating active buttons

You can experiment with other events such as mouse enter, mouse exits, mouse clicked by changing the current event from Start of Scene and adding the appropriate actions.

You can do this by changing the drop down list box located after the words "Show actions for" in the sequencer from "Start Of Scene" to any of the other possible events.

When the current event is, for example, "Mouse Clicked" then the simulator will simulate all actions as if a real mouse click had been performed by a user viewing your animation in their browser.

To see your design running fully and responding to all mouse events you need to test it in a browser - and that's what we are going to do next...


Tutorial Pg 6
Tutorial

Step 6: Making your ellipse phase AND size at the same time

Add another phaser (intensity action) to your ellipse, typing in "100" without quotes for the final value.

Drag the new bar so that it presses up against the first phaser bar.

Click on the second waypoint (labeled "2") and resize it so that it is larger than the first waypoint.


Tutorial Pg 1
Tutorial

Step 1: Start with a clean slate!

We are now going to start with a clean slate. If AnFX already has a design open (most probably anfxtimes.afd) choose File and select New. If it asks if you want to save press Yes to save your changes. If you don't already have AnFX running, start AnFX by clicking Start | Program Files | AnFX | AnFX and choose the "Blank Design" option to start a new design.